import { Form, Input, Button, Select, Table, Space, Pagination, Popconfirm } from 'antd';
import store from '../../../store/index'
import http from '../../../utils/http';

const { Option } = Select;

const Biao2 = ({ props }) => {
    //设置from
    const [form] = Form.useForm();
    // 设置table的表头
    const columns = [
        {
            title: '设备名称',
            dataIndex: 'ddetName',
        },
        {
            title: '设备编号',
            dataIndex: 'ddetNumber',
        },
        {
            title: '设备型号',
            dataIndex: 'ddetType',
        },
        {
            title: '安装位置',
            dataIndex: 'dinfLocation',
        },
        {
            title: '运行状态',
            dataIndex: 'dinfState',
        },
        {
            title: '运行时长(天)',
            dataIndex: 'dinfRuntime',
        },
        {
            title: '最新更新时间',
            dataIndex: 'dinfUpdate',
        },
        {
            title: '操作',
            dataIndex: '',
            render: (text, record) => (
                <Space size="middle">
                    <a onClick={() => { edit2(text, record) }}>详情</a>
                    <Popconfirm
                        title="您确定要删除这条内容吗?"
                        onConfirm={() => { confirm(text, record) }}
                        onCancel={cancel}
                        okText="确定"
                        cancelText="取消"
                    >
                        <a href="#">删除</a>
                    </Popconfirm>
                </Space>
            )
        },

    ];
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            name: record.name,
        }),
    };

    //确认删除的函数
    const confirm = (a, b) => {
        let num = parseInt(b.dinfId)
        let arr = new Array
        arr.push(num)
        http({
            url: '/device/deviceDelete',
            method: 'post',
            data: arr
        }).then((res) => {
            console.log(res);
            //如果删除成功，再次获取table数据，重新渲染
            if (res.code == 200) {
                http({
                    url: '/device/deviceInformation',
                    method: 'post'
                }).then((res) => {
                    console.log(res);
                    if (res.code === 200) {
                        props.setMydata(props.manage(res.data.deviceInformationVoList))
                    }
                })
            }
        })
    }

    //搜索
    const search = () => {
        //取出input框的值,设备名称,设备编号，运行状态
        let name = form.getFieldsValue(true).ddetName;
        let bianhao = form.getFieldsValue(true).ddetNumber;
        let type = form.getFieldsValue(true).dinfState;
        store.liujinchang.current = 1;
        console.log(store.liujinchang.current, '当前页');
        console.log(name, bianhao, type);
        http({
            url: '/device/deviceInformation',
            params: {
                ddetName: name ? name : '',
                ddetNumber: bianhao ? bianhao : '',
                dinfState: type ? type : ''
            },
            method: 'post'
        }).then((res) => {
            console.log(res.data);
            // show(res.data.deviceInformationVoList)
            props.setMydata(props.manage(res.data.deviceInformationVoList))
            store.liujinchang.amount = res.data.sum;
            console.log(res.data.sum, '查询后');

        })
    }

    //重置
    const reset = () => {
        http({
            url: '/device/deviceInformation',
            method: 'post',

        }).then((res) => {
            props.setMydata(props.manage(res.data.deviceInformationVoList))
            store.liujinchang.amount = res.data.sum;
            store.liujinchang.current = 1;
        })
    }
    // 分页
    const onChange = (page) => {
        console.log('Page: ', page);
        store.liujinchang.current = page
        http({
            url: '/device/deviceInformation',
            method: 'post',
            params: {
                current: page
            }
        }).then((res) => {
            console.log(res);
            if (res.code === 200) {
                props.setMydata(props.manage(res.data.deviceInformationVoList))
            }
        })

    }

    const edit2 = (a, b) => {
        props.setState(5);
        props.setMydata(b);
        // console.log(props);
    }

    const onShowSizeChange = (current, pageSize) => {
        console.log(current, pageSize);
    }
    const cancel = () => {

    }



    return (
        <div>
            <Form form={form} name="horizontal_login" layout="inline" className='Role'>
                <Form.Item
                    name="ddetName"
                    label='设备名称：'
                >
                    <Input placeholder="请输入设备名称" />
                </Form.Item>
                <Form.Item
                    name="ddetNumber"
                    label='设备编号：'
                >
                    <Input placeholder="请输入设备编号" />
                </Form.Item>

                <Form.Item
                    name="dinfState"
                    label='告警类型：'
                >
                    <Select placeholder='请选择' className='select'>
                        <Option value="1">设备故障</Option>
                        <Option value="2"> 告警事件</Option>
                    </Select>
                </Form.Item>
                <Form.Item className='btn'>
                    <div>
                        <Button className='cha'
                            type="primary"
                            onClick={search}>查询</Button>
                        <Button className='resize' onClick={reset} type="primary">重置</Button>
                    </div>

                </Form.Item>
            </Form>
            <Table className='table1'
                pagination={false}
                rowSelection={{
                    ...rowSelection,
                }}
                columns={columns}
                dataSource={props.mydata}
            />
            <Pagination
                showQuickJumper
                defaultCurrent={1}
                current={store.liujinchang.current}
                total={store.liujinchang.amount}
                onChange={onChange}
                onShowSizeChange={onShowSizeChange}
            />
        </div>
    );

}
export default Biao2;